<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no" />
    <title>Whitestorm.js Playground</title>
    <link href="css/webfont.css" rel="stylesheet">
    <link href="css/core.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/bootstrap-tour-standalone.min.css" rel="stylesheet">
    <!-- adding it locally because jsdelivr had a self signed cert -->
    <script src="js/clipboard.min.js"></script>
</head>

<body>
    <section>
        <!-- Buttions div -->
        <div class="column-100 padding-up-down-10 center">
            <!-- Float: left -->
            <button class="btn" id="clear" title="Click to clear all panes"><i class="fa fa-trash-o" aria-hidden="true"></i>Clear</button>
            <button class="btn" id="tour"><i class="fa fa-compass" aria-hidden="true"></i>Tour</button>

            <!-- Float: center -->
            <a href="#fullscreen" class="btn" id="fullscreenToggle" title="Enlarge Preview"><i class="fa fa-arrows-alt" aria-hidden="true"></i>Fullscreen</a>
            <button class="btn" id="download" title="Download to computer"><i class="fa fa-download" aria-hidden="true"></i> Download</button>
            <a href="#share" class="btn" id="generate" title="generate url"><i class="fa fa-share-alt-square" aria-hidden="true"></i> Share</a>
            <button class="btn" id="run" title="Run"><i class="fa fa-play" aria-hidden="true"></i> Run</button>

            <!-- Float: right -->
            <button class="btn" id="autoSaveToggle" title="Toggle Auto Save"><i class="fa fa-magic" aria-hidden="true"></i>Auto Save</button>
            <button class="btn" id="save" title="Save to localStorage"><i class="fa fa-floppy-o" aria-hidden="true"></i> Save</button>
            <button class="btn" id="load" title="Load from localStorage"><i class="fa fa-upload" aria-hidden="true"></i> Load</button>

            <!--version selection dropdown-->
            <!--value of option is used to build url for file so make sure it matches filename sturcture-->
            <select class="dropdown" id="version_dropdown" name="select">
                <!--versions from github repo-->
                <option value="dev">development</option>
                <option value="master">master</option>
                <!--version 1.2.0-->
                <option value="v1_2_0">v1.2.0</option>
                <option value="v1_2_0-light">v1.2.0-light</option>
                <!--version 1.1.0-->
                <option value="v1_1_0">v1.1.0</option>
                <option value="v1_1_0-light">v1.1.0-light</option>
                <!--version 1.0.0-->
                <option value="v1_0_0">v1.0.0</option>
                <option value="v1_0_0-light">v1.0.0-light</option>
                <!--dev versions-->
                <option value="r11_2">r11.2</option>
                <option value="r11">r11</option>
                <option value="r10_2">r10.2</option>
                <option value="r10">r10</option>
            </select>
        </div>
        <!-- <div id="window-container" > -->
        <!-- js code editer div -->
        <div id="editor" class="window column-50" style="float:left;">
            <pre id="js" ></pre>
            <span class="windowLabel" id="jsLabel" style="margin-right:15px">JavaScript</span>
        </div>
        <!-- vertical split line -->
        <div id="divider">
        </div>
        <!-- code preview div -->
        <div id="preview" class="preview" style="float:right">
            <iframe id="iframe" name="preview"
                sandbox="allow-scripts allow-modals allow-pointer-lock allow-same-origin allow-popups allow-forms"
                allowtransparency="true"></iframe>
            <span class="windowLabel" id="iframeLabel">Preview</span>
            <span id="iframeClose">close</span>
        </div>
    </section>

    <div class="gradient">
        <ul class="share-buttons">
            <li><a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwhitestormjs.xyz%2Fplayground%2F&t=" title="Share on Facebook" target="_blank" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.URL)); return false;"><img src="images/simple_icons/Facebook.png"></a></li>
            <li><a href="https://twitter.com/intent/tweet?source=http%3A%2F%2Fwhitestormjs.xyz%2Fplayground%2F&text=:%20http%3A%2F%2Fwhitestormjs.xyz%2Fplayground%2F&via=whitestormjs" target="_blank" title="Tweet" onclick="window.open('https://twitter.com/intent/tweet?text=' + encodeURIComponent(document.title) + ':%20'  + encodeURIComponent(document.URL)); return false;"><img src="images/simple_icons/Twitter.png"></a></li>
            <li><a href="https://plus.google.com/share?url=http%3A%2F%2Fwhitestormjs.xyz%2Fplayground%2F" target="_blank" title="Share on Google+" onclick="window.open('https://plus.google.com/share?url=' + encodeURIComponent(document.URL)); return false;"><img src="images/simple_icons/Google+.png"></a></li>
            <li><a href="http://www.reddit.com/submit?url=http%3A%2F%2Fwhitestormjs.xyz%2Fplayground%2F&title=" target="_blank" title="Submit to Reddit" onclick="window.open('http://www.reddit.com/submit?url=' + encodeURIComponent(document.URL) + '&title=' +  encodeURIComponent(document.title)); return false;"><img src="images/simple_icons/Reddit.png"></a></li>
            <li><a href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fwhitestormjs.xyz%2Fplayground%2F&title=&summary=&source=http%3A%2F%2Fwhitestormjs.xyz%2Fplayground%2F" target="_blank" title="Share on LinkedIn" onclick="window.open('http://www.linkedin.com/shareArticle?mini=true&url=' + encodeURIComponent(document.URL) + '&title=' +  encodeURIComponent(document.title)); return false;"><img src="images/simple_icons/LinkedIn.png"></a></li>
            <li><a href="http://wordpress.com/press-this.php?u=http%3A%2F%2Fwhitestormjs.xyz%2Fplayground%2F&t=&s=" target="_blank" title="Publish on WordPress" onclick="window.open('http://wordpress.com/press-this.php?u=' + encodeURIComponent(document.URL) + '&t=' +  encodeURIComponent(document.title)); return false;"><img src="images/simple_icons/Wordpress.png"></a></li>
            <li><a href="https://github.com/WhitestormJS/playground/issues" target="_blank" title="Report an Issue" onclick="window.open("https://github.com/WhitestormJS/playground/issues"); return false;"><img style="width: 20px; height: 20px;" src="images/simple_icons/issue.png"></a></li>
            <li><a href="https://github.com/WhitestormJS/playground" style="color: white;" target="_blank" title="View Source on Github" onclick="window.open("https://github.com/WhitestormJS/playground"); return false;"><svg style="fill: white; width: 20px; height: 20px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.083-.202-.358-1.015.077-2.117 0 0 .672-.215 2.2.82.638-.178 1.323-.266 2.003-.27.68.004 1.364.092 2.003.27 1.527-1.035 2.198-.82 2.198-.82.437 1.102.163 1.915.08 2.117.513.56.823 1.274.823 2.147 0 3.073-1.87 3.75-3.653 3.947.287.246.543.735.543 1.48 0 1.07-.01 1.933-.01 2.195 0 .215.144.463.55.385C13.71 14.53 16 11.534 16 8c0-4.418-3.582-8-8-8"/></svg></li>
        </ul>
    </div>

    <div id="share">
        <!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID  class="close-animatedModal" -->
        <div class="modal-content share-section">
            <a href="#" id="clipboard"><div class="share-box">
                <i class="fa fa-clipboard fa-5x" aria-hidden="true"></i>
                <hr>
                <h2>Copy to clipboard</h2></div></a>
            <a href="#" id="twitter"><div class="share-box">
                <i class="fa fa-twitter fa-5x" aria-hidden="true"></i>
                <hr>
                <h2>Tweet!</h2></div></a>
            <a href="#" id="facebook"><div class="share-box">
                <i class="fa fa-facebook fa-5x" aria-hidden="true"></i>
                <hr>
                <h2>Share with Facebook!</h2></div></a>
        </div>
        <i class="fa fa-times fa-3x close-share" aria-hidden="true" style="color: #000; padding: 20px; cursor: pointer; position: fixed; top: 0; left:0;"></i>
    </div>

    <div id="fullscreen">
        <i class="fa fa-close fa-3x close-fullscreen close-fullscreen-btn" aria-hidden="true"></i>
        <div class="modal-content">
            <iframe id="iframe-fullscreen" name="preview"
                sandbox="allow-scripts allow-modals allow-pointer-lock allow-same-origin allow-popups allow-forms"
                allowtransparency="true"></iframe>
        </div>
    </div>

    <!--js libs-->
    <script src="js/jquery.min.js"></script>
    <script src="js/ace-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.ui.position.js" type="text/javascript" charset="utf-8"></script>
    <!-- load ace language tools -->
    <script src="js/ace-min-noconflict/ext-language_tools.js"></script>
    <script src="js/bootstrap-tour-standalone.min.js"></script>
    <script src="js/animatedModal.min.js"></script>
    <!--this should be included last-->
    <script src="js/core.js" type="text/javascript" charset="utf-8"></script>
</body>
